<template>
	<view>
		<view class="nav-chuli" v-if="deptKey == 'chuli'">
			<view class="nav-flex">
				<view>登录人员：</view>
				<view>{{ list.userName }}</view>
			</view>
			<view class="nav-flex">
				<view>接受时间：</view>
				<view>{{ list.userTime }}</view>
			</view>
			<view class="nav-flex">
				<view>是否签收：</view>
				<view>{{ list.isReceiveName }}</view>
			</view>
			<view class="nav-flex">
				<view>签收时间：</view>
				<view>{{ list.recevieTime }}</view>
			</view>
			
			<view class="nav-flex">
				<view>处理结果：</view>
				<input type="text" v-model="handleResultDesc" placeholder="请输入" />
			</view>
			<view class="nav-flex">
				<view>附件上传：</view>
				<view class="uni-set">
					<input style="border: none;" @click="uploading(1)" type="text" disabled v-model="handleFu" placeholder="点击上传" />
					<image src="/static/img/fanhui-right.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="nav-chuli" v-if="deptKey == 'shuiwu'">
			<view class="nav-flex">
				<view>处理意见：</view>
				<input type="text" v-model="waterOpinion" placeholder="请输入" />
			</view>
			<view class="nav-flex">
				<view>受理部门：</view>
				<view class="uni-set">
					<view class="uni-picker">
						<picker @change="bindPickerChange1" :value="index1" :range="array1" range-key="name">
							<view>{{ department }}</view>
						</picker>
					</view>
					<image src="/static/img/fanhui-right.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="nav-chuli" v-if="deptKey == 'liqun' || deptKey == 'kuncheng' || deptKey == 'wushui' || deptKey == 'zilaishui'">
			<view class="nav-flex">
				<view>工单编号：</view>
				<view>{{ list.orderNo }}</view>
			</view>
			<view class="nav-flex">
				<view>登录人员：</view>
				<view>{{ list.officeDisposerName }}</view>
			</view>
			<view class="nav-flex">
				<view>接受时间：</view>
				<view>{{ list.officeTime }}</view>
			</view>
			<view class="nav-flex">
				<view>反映类别：</view>
				<view class="uni-set">
					<view class="uni-picker">
						<picker @change="bindPickerChange2" :value="index2" :range="array2" range-key="dictName">
							<view>{{ reflectCategoryName }}</view>
						</picker>
					</view>
					<image src="/static/img/fanhui-right.png" mode=""></image>
				</view>
			</view>
			<view class="nav-flex">
				<view>受理部门：</view>
				<view class="uni-set">
					<view class="uni-picker">
						<picker @change="bindPickerChange1" :value="index1" :range="array1" range-key="name">
							<view>{{ department }}</view>
						</picker>
					</view>
					<image src="/static/img/fanhui-right.png" mode=""></image>
				</view>
			</view>
			<view class="nav-flex">
				<view>处理意见：</view>
				<input type="text" v-model="handleOpinion" placeholder="请输入" />
			</view>
			<view class="nav-flex">
				<view>附件上传：</view>
				<view class="uni-set">
					<input style="border: none;" @click="uploading(2)" type="text" disabled v-model="officeFu" placeholder="点击上传" />
					<image src="/static/img/fanhui-right.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="submit" @click="submit()">确认</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderID: '',
			deptKey: '',
			list:[],

			// 处理
			handleResultDesc: '',
			handleFu: '',
			// 水务
			waterOpinion: '', //处理结果

			array1: [
				// {name:"部门1",id:'部门id1'},
			],
			index1: 0,
			department: '选择', //处理部门
			departmentId: '', //处理部门id
			// 部门
			array2: [
				// {name:"反映类别",id:'反映类别id1'},
			],
			index2: 0,
			reflectCategoryName: '选择', //反映类别
			reflectCategory: '', //反映类别id

			// departmentId:'请选择',//受理部门

			handleOpinion: '', //处理意见
			officeFu: '' //附件
		};
	},
	onLoad(e) {
		this.deptKey = e.deptKey;
		this.orderID = e.orderID;
		this.list = JSON.parse(e.list)
		
		if (this.deptKey == 'chuli') {
			this.handleResultDesc = this.list.handleResultDesc;
			this.handleFu = this.list.handleFu;
		} else if (this.deptKey == 'shuiwu') {
			this.waterOpinion = this.list.waterOpinion;
			this.department = this.list.departmentName;
			if(!this.department){
				this.department='选择'
			}
			this.departmentId = this.list.departmentId;
			this.shuiwuShouli();
		} else if (this.deptKey == 'liqun' || this.deptKey == 'kuncheng' || this.deptKey == 'wushui' || this.deptKey == 'zilaishui') {
			this.reflectCategoryName = this.list.reflectCategoryName;
			if(!this.reflectCategoryName){
				this.reflectCategoryName='选择'
			}
			this.reflectCategory = this.list.reflectCategory;
			this.department = this.list.departmentName;
			if(!this.department){
				this.department='选择'
			}
			this.departmentId = this.list.departmentId;
			this.handleOpinion = this.list.handleOpinion;
			this.officeFu = this.list.officeFu;
		
			this.bumen();
			this.leibie();
		}
	},
	methods: {
		// 下面的是上传照片
		uploading(num) {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ["camera", "album"], //从相册选择
				success: function(res) {
					let file = res.tempFilePaths[0];
					// 下面是临时使用的方法
					// let file = res.tempFiles[0].path;
					uni.showLoading({
						mask: false
					});
					uni.uploadFile({
						url: '/app/system/upload', //仅为示例，非真实的接口地址
						filePath: file,
						name: 'file',
						success: uploadFileRes => {
							uni.hideLoading();
							const res = JSON.parse(uploadFileRes.data);
							// console.log(res)
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
							// that.handleFu = file;
							if (num == 1) {
								that.handleFu = res.data.fileId;
							} else if (num == 2) {
								that.officeFu = res.data.fileId;
							}
							// console.log(that.handleFu, '这是图片文件id');
						}
					});
				}
			});
		},
		// 水务部门
		shuiwuShouli() {
			var that = this;
			uni.request({
				url: '/app/wechatApi/getDept',
				method: 'POST',
				data: {
					pId:'1205392769355874306'
				},
				header: {
					'Content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					if (res.data.code === 200) {
						that.array1 = res.data.data
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				},
				error: e => {
					console.log(e);
				}
			});
		},

		// 办公室的反应类别
		leibie() {
			var that = this;
			uni.request({
				url: '/app/wechatApi/wechatOneFiveOrder/getDictsRelectWe',
				method: 'get',
				data: {
					code: 'oneFiveOrderReflectCate',
					openid: uni.getStorageSync('openid')
				},
				header: {
					'Content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					if (res.data.code === 200) {
						that.array2 = res.data.data;
						// console.log(res.data.data)
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				},
				error: e => {
					console.log(e);
				}
			});
		},
		// 办公室选择反应类别
		bindPickerChange2: function(e) {
			// console.log('picker发送选择改变，携带值为', e.target.value);
			this.index2 = e.target.value;
			this.reflectCategoryName = this.array2[e.target.value].dictName;
			this.reflectCategory = this.array2[e.target.value].dictCode;
			console.log(this.reflectCategory, this.reflectCategory, '==办公室选择反应类别');
		},
		// 办公室的部门
		bumen() {
			var that = this;
			uni.request({
				url: '/app/wechatApi/getDept',
				method: 'POST',
				data: {
					pId:uni.getStorageSync('deptId')
				},
				header: {
					'Content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					if (res.data.code === 200) {
						that.array1 = res.data.data
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				},
				error: e => {
					console.log(e);
				}
			});
		},
		// 手动选择受理部门
		bindPickerChange1: function(e) {
			// console.log('picker发送选择改变，携带值为', e.target.value);
			this.index1 = e.target.value;
			this.department = this.array1[e.target.value].name;
			this.departmentId = this.array1[e.target.value].id;
			console.log(this.department, this.departmentId, '==选择受理部门');
		},

		// 保存
		submit() {
			var that = this;
			var values;
			if(!that.departmentId){
				that.departmentId=''
			}
			if (that.deptKey == 'chuli') {
				values = {
					orderId: that.orderID,
					openid: uni.getStorageSync('openid'),
					handleResultDesc: that.handleResultDesc,
					handleFu: that.handleFu,
					handlePoint:'save'
				};
			} else if (that.deptKey == 'shuiwu') {
				values = {
					orderId: that.orderID,
					openid: uni.getStorageSync('openid'),
					waterOpinion: that.waterOpinion,
					departmentId: that.departmentId,
					handlePoint:'save'
				};
			} else if (that.deptKey == 'liqun' || that.deptKey == 'kuncheng' || that.deptKey == 'wushui' || that.deptKey == 'zilaishui') {
				values = {
					orderId: that.orderID,
					openid: uni.getStorageSync('openid'),
					reflectCategory: that.reflectCategory,
					departmentId: that.departmentId,
					handleOpinion: that.handleOpinion,
					officeFu: that.officeFu,
					handlePoint:'save'
				};
			}
			uni.showLoading({
				mask: false
			})
			uni.request({
				url: '/app/wechatApi/wechatOneFiveOrder/handleOrder',
				method: 'POST',
				data: values,
				header: {
					'Content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					uni.hideLoading()
					if (res.data.code === 200) {
						uni.showToast({
							title:'保存成功!',
							icon:'none'
						})
						setTimeout(function(){
							uni.navigateBack({
								delta:2
							})
						},1500)
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				},
				error: e => {
					console.log(e);
				}
			});
		}
	}
};
</script>

<style lang="less">
.nav-chuli {
	padding: 1upx;
		
	.nav-flex{
		display: flex;
		box-shadow: 0px 0px 4px 4px rgba(0, 1, 2, 0.08);
		margin: 25upx;
		padding: 25upx;
		border-radius: 15upx;
		white-space: nowrap;
		
		input {
			width: 70%;
			padding-bottom: 10upx;
			color: #666;
			font-size: 30upx;
		}
		image {
			width: 230upx;
			height: 230upx;
			margin-top: 25upx;
		}
		
		.uni-set {
			width: 70%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		
			.uni-picker {
				width: 90%;
				padding-left: 15upx;
			}
			image {
				width: 20upx;
				height: 25upx;
				margin-top: -3upx;
			}
		}
	}
}
// 提交
.submit {
	background: #48E6E7;
	color: #ffffff;
	text-align: center;
	padding: 10upx 0;
	margin: 25upx;
	margin-top: 150upx;
	border-radius: 25upx;
}
</style>
